Day3 JavaScript学习 - DOM节点排序

今天学习笔记内容是DOM节点的排序，要点就是前面两篇的内容，外加上Array的一些内容。这个例子其实就是JavaScript教程 - 廖雪峰的官方网站中的一个例子，我觉得这个例子非常好，于是记载在这里了。

题目：

根据列表的内容，对列表节点进行排序，如下html片段，根据li节点的内容进行排序。

1
2
3
4
5
6
7
8
9
<ol id="test-list">
	<li class="lang">Scheme</li>
	<li class="lang">JavaScript</li>
	<li class="lang">Python</li>
	<li class="lang">Ruby</li>
	<li class="lang">Haskell</li>
	<li class="lang">Html</li>
	<li class="lang">Css</li>
</ol>

解题：

这里我总结了大概下列5种解题方案

  1. 直接取出DOM节点，存入一个Array中，然后针对Array进行sort排序，最后依次插入到父节点中；
  2. 取出每个li节点的文本信息，存入Array队列中，然后针对文本进行排序，创建的节点，将文本赋值，替代父节点innerHTML信息；
  3. 前面同2一样，后面不用创建新的节点，直接给父节点的children赋值；
  4. 采用排序算法，直接取出最小或者最大的节点，插入到父节点中；
  5. 采用冒泡排序算法，使用insertBefore方法冒泡处理；（此处参考教程评论处）

OK，代码实践如下，亦或者直接点击此处查看效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// 直接将DOM节点保存在Array列表中进行排序
function sortDOM1 () {
	var list = document.getElementById('test-list');
	var arr = [].slice.call(document.getElementsByClassName("lang"));
	arr.sort(function(x1,x2){
		if (x1.innerHTML < x2.innerHTML){
			return -1;
		}else if (x1.innerHTML > x2.innerHTML){
			return 1;
		}else{
			return 0;
		}
	});
	for(var i = 0 ; i < arr.length ; i++){
		list.appendChild(arr[i]);
	}
}
// 先清空，再创建
function sortDOM2(){
	var list = document.getElementById("test-list");
	var lang = document.getElementsByClassName("lang");
	var arrList = [];
	for (var i = 0 ; i < lang.length ; i ++){
		arrList[i] = lang[i].innerHTML;
	}
	arrList.sort();
	list.innerHTML = ""; // 清空一个DOM节点的方法，简单粗暴
	for (var i = 0 ; i < arrList.length ; i ++){
		var newElement = document.createElement("li");
		newElement.setAttribute("class","lang");
		newElement.innerHTML = arrList[i];
		list.appendChild(newElement);
	}
}
// 直接更改children
function sortDOM3(){
	var list = document.getElementById("test-list");
	var lang = document.getElementsByClassName("lang");
	var arrList2 = [];
	for (var i = 0 ; i < lang.length ; i ++){
		arrList2[i] = lang[i].innerHTML;
	}
	arrList2.sort();
	for(var i = 0 ; i < arrList2.length ; i ++){
		list.children[i].innerHTML = arrList2[i];
	}
}
// 排序算法
function sortDOM4 () {
	var list = document.getElementById("test-list");
	var lang = document.getElementsByClassName("lang");
	for (var i = 0 ; i < lang.length-1 ; i++){
		for(var j = i+1 ; j < lang.length ; j ++){  // 	取出最大的那个，插入第一个
			if (lang[i].innerHTML < lang[j].innerHTML){
				var a ;
				a = lang[i].innerHTML;
				lang[i].innerHTML = lang[j].innerHTML;
				lang[j].innerHTML = a; 
			}
		}
		list.children[i].innerHTML = lang[i].innerHTML;
	}
}
// 冒泡排序算法
function sortDOM5 (){
	var list = document.getElementById("test-list");
	var lang = document.getElementsByClassName("lang");
	for (var i = 0 ; i < lang.length ; i ++){
		for(var j = 0 ; j < lang.length - i -1 ; j ++){  // 每次遍历次数递减
			if(lang[j].innerHTML > lang[j+1].innerHTML){
				list.insertBefore(lang[j+1],lang[j]);
			}
		}
	}
}
技术, JavaScript
dom, array